<template>
    <main class="analysis">
        <div class="question-bank-header">
            <h1 class="question-bank-name">{{ student.questionBank.name }}</h1>
            <div class="video-url">
                <n-icon size="40" class="pointer" @click="openNewPage(student.questionBank.task_resources)">
                    <play-outline/>
                </n-icon>
                <span class="pointer" @click="openNewPage(student.questionBank.task_resources)">视频学习</span>
            </div>
        </div>
        <!--每一道题目-->
        <div>
            <n-scrollbar style="max-height: 72vh">
                <div class="problem" v-for="(index,item) in student.questionBank.children">
                    <n-radio-group v-model:value="index['student_answer']" :name="'radioGroup'+index.number">
                        <div class="question">{{ item + 1 + '. ' + index.question }}</div>
                        <n-radio :key="'A'" :value="'A'">
                            <div>A: {{ index['A'] }}</div>
                        </n-radio>
                        <n-radio :key="'B'" :value="'B'">
                            <div>B: {{ index['B'] }}</div>
                        </n-radio>
                        <n-radio :key="'C'" :value="'C'">
                            <div>C: {{ index['C'] }}</div>
                        </n-radio>
                        <n-radio :key="'D'" :value="'D'">
                            <div>D: {{ index['D'] }}</div>
                        </n-radio>

                    </n-radio-group>
                </div>
            </n-scrollbar>
        </div>
        <n-button type="primary" round @click="submitted">提交</n-button>
    </main>
</template>

<script setup>
import {useStudentStore} from "@/stores/student";
import {useRoute} from "vue-router";
import {PlayOutline} from "@vicons/carbon"
import workApi from "@/http/workApi";
import router from "@/router";

const student = useStudentStore()
const route = useRoute()
student.setMenuValue(route.name, !route.query.taskId)

student.updateQuestionBank({
    training_id: route.query.projectId,
    task_id: route.query.taskId
})

function openNewPage(url) {
    // window.open(url)
    console.log(url)
    window.open("https://tch.metaskillcloud.com/home")
}

const submitted = () => {
    const data = {
        training_id: Number(route.query.projectId),
        task_id: Number(route.query.taskId),
        answers: []
    }
    student.questionBank['children'].map(s => {
        data.answers.push({
            number: s['number'],
            answer: s['student_answer']
        })
        return s
    })
    workApi.post('student/task_analysis', data).then(r => {
        console.log(r)
        student.setTaskState(route.query.projectId, route.query.taskId)
        router.push({
            name: "Execute",
            query: route.query
        })
    })
}
student.setTaskState(route.query.projectId, route.query.taskId)
</script>

<style scoped lang="less">
.analysis {
    position: relative;
    width: 60vw;
    height: 90vh;
    margin: auto;

    .question-bank-header {
        display: flex;
        height: 10vh;
        line-height: 10vh;
        text-align: center;

        .question-bank-name {
            flex: 3;
        }

        .video-url {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            span {
                height: auto;
                line-height: initial;
            }
        }
    }

    .n-radio-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 30px;

        .n-radio {
            margin: 15px 0 0 20px;
        }
    }

    .n-button {
        position: absolute;
        left: 50%;
        bottom: 30px;
    }
}
</style>